<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				outline: none;
			}
			
			table {
				width: 800px;
				text-align: center;
				border-collapse: collapse;
				margin: 20px auto;
			}
			
			tr {
				height: 40px;
			}
			
			td {
				border: 1px solid #ccc;
			}
			
			.search td {
				border: none;
			}
			
			a {
				text-decoration: none;
				color: black;
			}
			
			tbody td a {
				font-size: 14px;
				color: rgb(218, 176 ,0);
			}
			
			.searchipt {
				height: 25px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<table>
				<thead>
					<tr class="search">
						<td colspan="5" style="text-align: left;">
							<input 
								class="searchipt" 
								type="text" 
								placeholder="请输入你要查找的姓名" 
								v-model="searchKey"
							/>
						</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>序号</td>
						<td v-for="(item,key) in theadData">
							{{item}}
							<select v-if="key == 'studentID'" v-model="sortValue">
								<option>默认</option>
								<option>升序</option>
								<option>降序</option>
							</select>
						</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in StuData" :key="item.studentID">
						<td>{{index + 1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.studentID}}</td>
						<td>{{item.class}}</td>
						<td><a href="#" @click="clickYiChu(item.studentID, index)">移除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script>
			Vue.config.productionTip = false;
			new Vue({
				el: '#box',
				data: {
					// 学生数据
					theadData: {
						name: '姓名',
						studentID: '学号/工号',
						class: '班级'
					},
					studentData: [
						{
							name: '易心欣',
							studentID: '21805200120',
							class: '18高计应'
						},
						{
							name: '易欢',
							studentID: '21805200119',
							class: '18高计应'
						},
						{
							name: '夏盖资',
							studentID: '21805200116',
							class: '18高计应'
						},
						{
							name: '汤依丛',
							studentID: '21805200114',
							class: '18高计应'
						},
						{
							name: '骆鹏',
							studentID: '21805200112',
							class: '18高计应'
						},
						{
							name: '卢双禧',
							studentID: '21805200110',
							class: '18高计应'
						},
						{
							name: '林鑫',
							studentID: '21805200108',
							class: '18高计应'
						},
						{
							name: '甘思思',
							studentID: '21805200105',
							class: '18高计应'
						},
						{
							name: '樊家俊',
							studentID: '21805200104',
							class: '18高计应'
						},
						{
							name: '邓祖方',
							studentID: '21805200103',
							class: '18高计应'
						},
						{
							name: '易宇龙',
							studentID: '21805200121',
							class: '18高计应'
						},
						{
							name: '易星玉',
							studentID: '21805200122',
							class: '18高计应'
						},
						{
							name: '袁宇',
							studentID: '21805200124',
							class: '18高计应'
						}
					],
					searchKey: '',	// 搜索框的value值 数据双向绑定
					sortValue: '默认'	// 下拉列表的value值	数据双向绑定
				},
				computed: {
					StuData() {
						let stuData = this.studentData.filter((item) => { // 过滤
							return item.name.indexOf(this.searchKey) != -1;
						})
						switch(this.sortValue) {
							case '默认':	// 当下拉列表选中 默认 时
								return stuData;
							case '升序':	// 当下拉列表选中 升序 时
								stuData.sort(this.objSort('studentID', true))
								break;
							case '降序':	// 当下拉列表选中 降序 时
								stuData.sort(this.objSort('studentID'))
								break;
						}
						return stuData;
					}
				},
				methods: {
					// 表格移除方法
					clickYiChu(v, i) {
						let arr = [];
						for (let item of this.studentData) {
							arr.push(item.studentID);
						}
						let index = arr.indexOf(v);
						this.studentData.splice(index, 1); 	// 移除一条数据
					},
					// 数据排序 key为传入数组对象中的键名 f为布尔值 传入true为升序 false为降序
					objSort(key, f) {
						if(f){
							return (a, b) => {
								return a[key] - b[key];
							}
						}else {
							return (a, b) => {
								return b[key] - a[key];
							}
						}
					}
				}
			})
		</script>
	</body>
</html>